<!--
 * @Project: 
 * @Remark: 
 * @Author: shaoyuan
 * @Date: 2023-04-19 19:51:42
 * @LastEditors: shaoyuan
 * @LastEditTime: 2023-04-19 23:29:43
 * @FilePath: \logicflow-vue3-ts-vite\src\components\BrevityFlow.vue
-->
<script setup lang="ts">
import Pattern from './brevityElement/pattern.vue'
import Io from './brevityElement/io.vue'
import { onMounted, ref } from 'vue'
import LogicFlow from '@logicflow/core'
import {
  BpmnElement,
  BpmnAdapter,
  BpmnXmlAdapter,
  Snapshot,
  Control,
  Menu,
  SelectionSelect
} from '@logicflow/extension'
import '@logicflow/core/dist/style/index.css'
import '@logicflow/extension/lib/style/index.css'

LogicFlow.use(BpmnElement)
LogicFlow.use(BpmnAdapter)
LogicFlow.use(BpmnXmlAdapter)
LogicFlow.use(Snapshot)
LogicFlow.use(Control)
LogicFlow.use(Menu)
LogicFlow.use(SelectionSelect)

const logicflowRef = ref<any>(null)
const lf = ref<any>(null)

onMounted(() => {
  lf.value = new LogicFlow({
    container: logicflowRef.value as unknown as HTMLElement,
    width: 1200,
    height: 500,
    grid: {
      size: 10,
      visible: true,
      type: 'mesh',
      config: {
        color: '#ababab',
        thickness: 1
      }
    },
    keyboard: {
      enabled: true
    },
  })

  lf.value.render()
})

const handleClick = () => {
  console.log('流程图数据 => ', lf.value.getGraphRawData())
}
</script>
<template>
  <div class="flow-chart">
    <div id="logicflow" ref="logicflowRef" class="logicflow" />
    <Pattern :lf="lf" />
    <Io :lf="lf" />
    <a-button class="logic-btn" type="primary" @click="handleClick">提交</a-button>
  </div>
</template>
<style scoped>
.flow-chart {
  position: relative;
}
.logic-btn {
  position: absolute;
  bottom: 0px;
  right: 0px;
}
</style>